<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
		<title>评价</title>
		<link rel="stylesheet" href="../../../static/wx/css/style.css" />
		<script type="text/javascript" src="../../../static/wx/js/lib/rem.js"></script>
	</head>

	<body class="bf">
		<div id="wrap">
			<div class="wrap_star">
				<div class="wrap_star_img">
					<img src="../../../static/wx/img/star_default_icon.png" />
					<img src="../../../static/wx/img/star_default_icon.png" />
					<img src="../../../static/wx/img/star_default_icon.png" />
					<img src="../../../static/wx/img/star_default_icon.png" />
					<img src="../../../static/wx/img/star_default_icon.png" />
				</div>
				<div class="prompt">您对本次服务满意吗</div>
				<ul class="wrap_star_text clearfix">

				</ul>
			</div>

			<div class="wrap_btn none">
				<a href="javascript:void(0)" class="button" id="submit_btn">提交</a>
			</div>
			
			<div class="msg-succ">
				<img src="../../../static/wx/img/succ_icon.png" /> <span class="f20">提交成功</span> 
			</div>
		</div>
		<script type="text/javascript" src="../../../static/wx/js/lib/jquery-3.3.1.min.js"></script>
		<script type="text/javascript">
			var score,label=[];
			
			$('img').each(function(index) {
				var htmlStr = "";
				var star = '../../../static/wx/img/star_default_icon.png'; //普通灰色星星图片的存储路径
				var starRed = '../../../static/wx/img/star_selected_icon.png'; //红色星星图片存储路径
				var prompt = ['非常不满意 ，各方面都很差', '不满意 ，比较差', '一般，还需改善', '比较满意 ，仍可改善', '非常满意 ']; //评价提示语
				this.id = index; //遍历img元素，设置单独的id

				$(this).on("click", function() { //设置鼠标滑动和点击都会触发事件
					score=index+1;
		            console.log(score);
					$(".wrap_btn").removeClass("none");
					$('img').attr('src', star); //当“回滚”、“改变主意”时，先复位所有图片为木有打星的图片颜色
					$(this).attr('src', starRed); //设置鼠标当前所在图片为打星颜色图
					$(this).prevAll().attr('src', starRed); //设置鼠标当前的前面星星图片为打星颜色图
					$(this).parent('.wrap_star_img').siblings('.prompt').text(prompt[this.id]); //根据id的索引值作为数组的索引值

					if(index == 4) {
						htmlStr = "";
						htmlStr += '<li>上门神准时</li>';
						htmlStr += '<li>服务态度好</li>';
						htmlStr += '<li>称重准确效率高</li>';
						htmlStr += '<li>现场清扫整洁</li>';
					} else {
						htmlStr = "";
						htmlStr += '<li>上门不准时</li>';
						htmlStr += '<li>服务态度恶劣</li>';
						htmlStr += '<li>称重缺斤少两</li>';
						htmlStr += '<li>不守信用</li>';
						htmlStr += '<li>现场处理邋遢</li>';
						htmlStr += '<li>沟通不积极</li>';
					}
					$(".wrap_star_text").html(htmlStr);
				});
			});

			$(".wrap_star_text").on("click", "li", function() {
				$(this).toggleClass("on");
			});
			
			$("#submit_btn").on("click",function(){
				if($(".wrap_star_text li").is(".on")){
					$(".wrap_star_text li.on").each(function(){
						var str_ = $(this).html();
		            	label.push(str_);
		           })
		        }else{
		        	
		        	alert("评价类别必选");
		        	return false;
		        }
		        label = label.join(); 
		        var f = arguments.callee, self = this;
	            $(self).unbind('click', f);  
		        $.ajax({
		        	type:"post",
		        	url:"https://www.zaishengwang.com/wx/toSaveEvaluate.do",
		        	data:{
			        	userId: "",
				        sendUserId: "",
				        orderId: "",
				        score: score,
				        label: label
		        	 },
		        	 cache: true, 
	                 async:false, 
	                 dataType: "json",
	                 success: function(data){
                        if (data.msg == "1") {
                            $(".msg-succ").show();
                            //返回上一层
                        }else{
                            $(self).click(f);
                        }
	                 }
		        });
			})
		</script>
	</body>
</html>